<template>
    <div class="order">
      <van-sticky>
        <van-nav-bar title="订单列表"   left-text="" left-arrow @click-left="onClickLeft"/>
        <van-tabs v-model:active="currentorder" title-active-color="#ff9854" :line-height="2">
          <template v-for="(item ,index) in orderTitles" :key="index">
          <van-tab :title="item" :name="index"></van-tab>
          </template>
        </van-tabs>
      </van-sticky>
      <div class="content">
       
        <div v-if="orderlist.length">
          <template v-for="(item , index) in orderlist" :key="index">
            <div class="order-item">
             <div class="order-item-title">
             <div class="name">{{ item.unitName}}</div>
             <div class="status-name" :style="{ color: item.orderStatusDescColor }" >
               {{ item.orderStatusDesc }}
              <span class="sub-name"> {{ item.cancelReasonDesc }}</span>       
             </div>
            </div>
            <div class="order-item-info">
              <img class="img-bg" :src="item.unitPicture" alt="">

              <div class="bottom">
                <div class="b-left">
                  <div class="date">
                    <p class="day">{{ item.checkInDate }}</p>
                    <div class="week-time">
                      <span class="week">周{{ getWeekday(item.checkInDate) }}</span>
                      <span class="time">{{ item.checkInLatestTime }}</span>
                    </div>
                  </div>
                  <img class="arrow" src="@/assets/img/order/icon_right_orderlist.png" alt="">
                  <div class="date">
                    <p class="day">{{ item.checkOutDate }}</p>
                    <div class="week-time">
                      <span class="week">周{{ getWeekday(item.checkOutDate) }}</span>
                      <span class="time">{{ item.checkOutLatestTime }}</span>
                    </div>

                  </div>

                </div>
                <div class="b-right">
                  <p class="name">支付总价</p>
                  <span class="price">￥{{ item.prepayAmount }}</span>
                </div>
              </div>
            </div>
            <div class="order-item-btn">
              <div class="left">
                <div v-if="item.orderStatus === 1" class="left-content">
                  <img class="icon-time" src="@/assets/img/order/icon-time.png" alt="">
                  <span>{{ 20 }}</span>
                  <span class="msg">后订单自动取消</span>
                </div>
              </div>
              <div class="right">
                  <button v-if="item.orderStatus===1" class="btn connect">联系房东</button>
                  <button v-if="item.orderStatus===1" class="btn pay">去支付</button>
                  <button v-if="item.orderStatus===5" class="btn delete">删除</button>
                  <button v-if="item.orderStatus===5" class="btn orde">再次预定</button>
              </div>
            </div>
            </div>
           </template>
        
        </div>
        <div v-else-if="orderlist.length==0" class="tips">
          <img src="@/assets/img/order/icon-order.png" alt="">
          <div class="title">近期没有订单</div>
        </div>
             
      </div>  
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  import {ref,watch} from 'vue'
  import { getOrderList } from '@/services/modules/order';
  import useorderstore from '@/stores/modules/order';
  
  const orderstore=useorderstore();
  orderstore.fetchOrderList();


  const getWeekday = (dateString) => {
  const date = new Date(dateString);
  const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
  return daysOfWeek[date.getDay()];
  };
  const router=useRouter();
  const onClickLeft=()=>{
    router.back()
  }
const orderTitleType = ["all", "recent", "pend"];
const orderTitles = ["全部订单", "近期订单", "待支付"];
const currentorder=ref(0);
const orderlist = ref([0]);

getOrderList().then((res)=>{
  orderlist.value=res.data.data.orders || [];
  // console.log(orderlist.value);
  
})
watch(currentorder, (newValue, oldVaule) => {
  if (newValue !== undefined) {
    // console.log(orderTitleType[newValue]);
    orderstore.fetchOrderList(orderTitleType[newValue])
    getOrderList(orderTitleType[newValue]).then((res) => {
      orderlist.value = res.data.data.orders || [];
    });
  }
});
  </script>
  
  <style lang="less" scoped>
  .order {
  height: 100vh;
  --van-tabs-line-height: 40px;
  padding-bottom: 55px;

  .content {
    height: calc(100% - 86px);
    overflow: scroll;
    .order-item {
    padding: 0 20px;
    margin-top: 10px;
    background-color: white;
  // padding-bottom: 50px;
            .order-item-info {
            position: relative;
            height: 223px;
            width: 100%;
            border-radius: 6px;

            .img-bg {
              width: 100%;
              height: 100%;
              border-radius: 6px;
            }

            .bottom {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              height: 60px;
              background: rgba(9, 10, 14, 0.7);
              border-radius: 0 0 6px 6px;

              .b-left {
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                color: white;
                .date {
                  padding: 0 20px;

                  .day {
                    padding: 0;
                    margin: 0;
                    margin-bottom: 5px;
                    font-size: 16px;
                    line-height: 16px;
                    margin-bottom: 6px;
                  }

                  .week-time {
                    font-size: 12px;
                    text-align: center;
                    line-height: 12px;
                    opacity: 0.8;
                  }
                }
                .arrow {
                  width: 16px;
                  height: 12px;
                }
              }

              .b-right {
                position: relative;
                width: 105px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                &::before {
                  content: "";
                  position: absolute;

                  top: 10px;
                  left: -25px;
                  width: 1px;
                  height: 40px;
                  background-color: white;
                }

                .name {
                  color: #fff;
                  text-align: center;
                  line-height: 12px;
                  opacity: 0.8;
                  margin: 0;
                  transform: scale(0.9);
                }

                .price {
                  margin-top: 5px;
                  font-size: 16px;
                  color: var(--primary, #ff9645);
                  letter-spacing: 0;
                  text-align: right;
                  line-height: 16px;
                }
              }
            }
          }
          .rowlayout {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        .order-item-btn {
          .rowlayout();
          height: 60px;

          .left-content {
            .rowlayout();
            font-size: 11px;
            .icon-time {
              width: 11px;
              height: 11px;
              margin-right: 3px;
            }
            .time {
              color: var(--primary-color);
              letter-spacing: 0;
              margin-right: 1px;
            }
            .msg {
              color: #666;
              letter-spacing: 0;
              line-height: 11px;
            }
          }

          .right {
            .rowlayout();
            .btn {
              display: inline-block;
              text-align: center;
              line-height: 30px;
              margin-left: 10px;

              font-size: 14px;
              min-width: 75px;
              color: #666;
              background: #fff;
              border: 1px solid #e9e9e9;
              border-radius: 6px;
            }

            .connect {
            }
            .pay {
              color: white;
              background-color: var(--primary-color, #ff9645);
              border: 1px solid var(--primary-color, #ff9645);
            }
            .delete {
            }
            .orde {
              color: var(--primary-color, #ff9645);
              background-color: #fff;
              border: 1px solid var(--primary-color, #ff9645);
            }
          }
        }
        .order-item-title {
        padding: 20px 0px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .name {
          max-width: 204px;
          font-size: 12px;
          color: #201f1f;
          line-height: 12px;
        }
        .status-name {
          font-size: 18px;
          color: #ff9645;
          letter-spacing: 0;
        }

        .sub-name {
          position: relative;
          left: -5px;
          font-size: 12px;
          color: #b2b2b2;
        }
      }
    }
    .tips {
      text-align: center;
      margin-top: 80px;
      img {
        width: 88%;
      }

      .title {
        margin-top: 20px;
        color: #000;
        font-size: 18px;
      }
    }
  }
}
  </style>